<template>
    <div>

        <div id="chart1" class="chart"></div>


        <div id="chart2" class="chart" style="margin-top:5px"></div>



    </div>
</template>
  
<script>
import financia from '../../../../assets/js/financia';


export default {
    name: "financialStatistics",
    computed: {
        chart1 () {
            return this.$echarts.init(financia.getDom("chart1"));
        },
        chart2 () {
            return this.$echarts.init(financia.getDom("chart2"));
        }
    },
    methods: {
        getEchart1 () {
            this.chart1.setOption({
                title: {
                    text: '数据报表',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    orient: 'vertical',
                    right: 'right'
                },
                xAxis: {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '已通过业务数',
                        color: 'red',
                        data: [20, 32, 91, 34, 90, 60, 20, 45, 65, 80, 66, 60],
                        type: 'line',
                        smooth: true
                    },
                    {
                        name: '已结账业务数',
                        color: 'green',
                        data: [20, 15, 80, 30, 67, 60, 15, 45, 60, 70, 45, 66],
                        type: 'line',
                        smooth: true
                    }
                ]
            })
        },
        getEchart2 () {
            this.chart2.setOption({
                title: {
                    text: '实际发生业务统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    orient: 'vertical',
                    right: 'right'
                },
                xAxis: {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '新增业务数',
                        color: 'blue',
                        data: [20, 32, 91, 34, 90, 60, 20, 45, 65, 80, 66, 60],
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                    },
                    {
                        name: '作废业务数',
                        color: 'red',
                        data: [10, 8, 14, -11, 15, 15, -3, 4, -8, 14, 10, 5],
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                    },
                    {
                        name: '实际业务数',
                        color: 'rgb(255,193,7)',
                        data: [15, 33, 59, 47, 90, 46, 36, 45, 80, 44, 45, 50],
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                    }
                ]

            })
        }

    },
    mounted () {
        this.getEchart1();
        this.getEchart2();

    }
}
</script>
  
<style scoped lang="less">
.el-row {
    margin-top: 20px;
}

.chart {
    width: 100%;
    height: 350px;
    // .border-radius(8px);
    background-color: #f5f5f5;
    box-shadow: 0 0 5px transparent;


    &:hover {
        box-shadow: 0 0 5px #2EB3FF;
    }
}
</style>
  